<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: common_header(~{::title})">
    <title th:text="${shop.name+' - 商品管理'}"></title>
</head>
<body th:replace="layout :: common_body(~{::div.layui-body})">

<div class="layui-body" style="padding:15px;">
    <style type="text/css">
        .update {
            display: inline-block;
            margin-left: 15px;
            padding: 0 20px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            background: #009789;
            color: #fff;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
        }

        .update i {
            display: inline-block;
            margin-right: 10px;
            vertical-align: middle;
            width: 30px;
            height: 30px;
            background: url();
        }
        .T-box {
            width: 400px;
            padding: 0 20px;
            text-align: left;
        }

        .T-box p {
            position: relative;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
            margin-bottom: 15px;
        }

        .T-box p span {
            display: inline-block;
            padding-right: 15px;
            text-align: right;
            width: 110px;
            line-height: 36px;
            font-size: 14px;
        }

        .T-box p input, .T-box p select {
            width: 250px;
            padding: 0 5px;
            height: 34px;
            line-height: 34px;
            font-size: 14px;
            border: 1px solid #d3d3d3;
            outline: none;
        }

        .T-box p i {
            padding: 0 10px;
            line-height: 36px;
            font-style: normal;
        }

        .T-box p b {
            display: inline-block;
            margin-left: 10px;
            cursor: pointer;
            width: 60px;
            height: 36px;
            line-height: 36px;
            background: #c33;
            color: #fff;
            text-align: center;
            font-size: 13px;
            font-weight: normal;
        }
    </style>
    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title">
            <li><a th:href="@{/shop/dashboard(shopId=${shopId})}">店铺首页</a></li>
            <li><a th:href="@{/xhs/order_list(shopId=${shopId})}">订单管理</a></li>
            <li class="layui-this"><a th:href="@{/xhs/goods_list(shopId=${shopId})}">商品管理</a></li>
            <li><a class="order-item" th:href="@{/xhs/refund_list(shopId=${shopId})}">退货管理</a></li>
            <li><a href="/shop/shop_list_xhs" style="color: #9F9F9F;font-size:small;">选择店铺</a></li>
        </ul>
    </div>

    <!-- content starts -->
<!--    <blockquote class="layui-elem-quote">订单总览</blockquote>-->

    <fieldset class="layui-elem-field">
        <legend>按条件搜索</legend>
        <div class="layui-field-box">
            <form class="layui-form layui-form-pane1" method="get" action="/xhs/order_list">
                <input type="hidden" name="shopId" th:value="${shop.id}" />
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="goodsNum" th:value="${goodsNum}" placeholder="商品编码" style="width: 200px;" class="layui-input">
                    </div>

                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-btn-normal">搜索</button>
                        <i>总共：<span style="color: red" th:text="${totalSize}"></span>条记录</i>
                    </div>

                    <div class="layui-inline">
                        <span id="upd_order" class="layui-btn layui-btn-normal" th:attr="shopId=${shop.getId()}">更新小红书商品数据</span>
                        <span id="upd_order_" style="display: none;" class="update"><i></i>更新中</span>
                    </div>
                </div>


            </form>
        </div>
    </fieldset>

    <!-- start dd-wrapper -->
    <link rel="stylesheet" href="/goods/order.css"/>
    <div class="dd-wrapper">
        <table class="dd-table">
            <tr>
                <th>ID</th>
                <!-- <th>小红书spuId</th> -->
                <!-- <th>小红书skuId</th> -->
                <th width="80px">主图</th>
                <th>商品标题</th>
                <th>商品规格</th>
                <th >单价</th>
                <th>erp商品编码</th>
                <th>erp规格编码</th>
                <th>erp SkuId</th>
                <th>操作</th>
            </tr>
            <tr th:each="item:${lists}">
                <td th:text="${item.id }"></td>
                <!-- <td th:text="${item.getSpuId()}"></td> -->
                <!-- <td th:text="${item.getSkuId()}"></td> -->
                <td>
                    <div ><img th:src="${item.getImageUrl()}">
                    </div>
                </td>
                <td>
                    <p>
                        <span  th:text="${item.getName()}"></span><br/>
                        <span th:text="${item.getShortName()}"></span><br/>
                    </p>

                </td>
                <td th:text="${item.getSpec()}"></td>
                <td>¥<span th:text="${#numbers.formatDecimal(item.getPrice(),1,'COMMA',2,'POINT')  }" style="color: #FD482C;font-size: larger;"></span></td>

                <td><span th:text="${item.getGoodsNum()}"></span></td>
                <td><span th:text="${item.getErpCode()}"></span></td>
                <td><span th:text="${item.getErpSkuId()}"></span></td>

                <td>
                    <span th:if="${item.getErpSkuId() == 0}" th:attr="data-id=${item.getId()}" class="layui-btn layui-btn-normal layui-btn-sm order_send" >关联ERP商品</span>
                </td>
            </tr>
        </table>
    </div>
    <!-- end dd-wrapper -->
    <div class="layui-box layui-laypage layui-laypage-default pageBox">
        <paging:pager th:value="${pageIndex}" th:rows="${totalSize}" th:size="${pageSize}"/>
    </div>
    <script type="text/template" id="send-goods">
        <div class="T-box">
            <p><span>sku编码</span><input type="text" name="express_code"/></p>
            <p class="T-result"><span>&nbsp;</span><em id="erro"></em></p>
        </div>
    </script>
    <script type="text/javascript" src="/goods/Tips/Tips.min.js"></script>
    <script type="text/javascript">
        var layer;
        var $;
        var windowOpen;
        layui.use(['laydate', 'jquery', 'form', 'layer'], function () {
            var laydate = layui.laydate;
            $ = layui.jquery;
            var form = layui.form;
            layer = layui.layer;
            laydate.render({
                elem: '#startTime'
                ,type: 'datetime'
            });
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
            });
            $(function () {
                var status = '[[${status}]]';
                $("#status").val(status);
                form.render(); //更新全部
                form.render('select'); //刷新select选择框渲染
            })

                $("#upd_order").click(function () {
                    $("#upd_order").hide();
                    $("#upd_order_").show();
                    let startTime = $("#startTime").val();
                    let endTime = $("#endTime").val();
                    let shopId=$(this).attr("shopId");
                    let data = {
                        startTime:startTime,
                        endTime:endTime,
                        shopId:shopId
                    };
                    $.ajax({
                        url: "/xhs/pull_goods_ajx",
                        type: "POST",
                        dataType: "JSON",
                        data:JSON.stringify(data),
                        contentType: 'application/json',
                        success: function (res) {
                            if (res.code == 0) {
                                alert(res.msg);
                                location.reload(true);
                            }else {
                                Tips.alert(res.msg);
                            }
                            $("#upd_order").show();
                            $("#upd_order_").hide();
                        }
                    })
                });

                //订单发货
                $(".order_send").click(function (e) {

                        e.stopPropagation();
                        e.preventDefault();
                        var id = $(this).attr('data-id');
                        Tips.confirm({
                            title: '关联ERP系统商品',
                            content: $('#send-goods').html(),
                            define: function () {
                                var data = {
                                    id: id,
                                    code: $("input[name='express_code']").val()
                                };
                                $.ajax({
                                    url: "/xhs/link_erp_goods_spec_ajax",
                                    type: "POST",
                                    dataType: 'json',
                                    contentType: 'application/json',
                                    data: JSON.stringify(data),
                                    success: function (res) {
                                        if (res.code == 0) {
                                            Tips.alert('成功', function () {
                                                location.reload(true);
                                            });
                                        } else {
                                            Tips.alert(res.msg);
                                        }
                                    }
                                });
                            }
                        });

                });


        });

    </script>

</div>
</body>
<html>
